﻿<!-- _meta 作为公共模版分离出去 -->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<link rel="Shortcut Icon" href="/admin/imgs/logo.ico"/>
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
	<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
	<title>大会后台</title>
	<style type="text/css">
		input[type=file] { padding: 5px; background: #EEE; }
	</style>

	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<script type="text/javascript" src="js/admin.js"></script>
	<script type="text/javascript">
	</script>
</head>
<body>
<section class="Hui-article-box" style="position:relative;top:0;left:0;">
	<nav class="breadcrumb" style="color:#888;">
		<i class="Hui-iconfont">&#xe67f;</i>
		<a href="main.html" class="maincolor">首页</a>
		<span class="c-gray en">&gt;</span>
		前台
		<span class="c-gray en">&gt;</span>
		大会视频
		<span class="c-gray en">&gt;</span>
		新增
	</nav>
</section>
<div class="page-container" id="upload" style="margin:10px 10%;width:50%;position:relative;top:50px;left:0;">
	<div class="row cl" style="margin-bottom:20px;">
		<label class="form-label col-xs-4 col-sm-3">
			视频上传：
		</label>
		<div class="formControls col-xs-8 col-sm-9">
			<!--<input type="text" class="input-text" placeholder="视频地址" id="link">-->
			<form action="/api/admin/video/upload" method="post" enctype="multipart/form-data">
				<input type="file" name="file">
				<button class="btn btn-secondary radius" type="submit">立即上传</button>
			</form>
		</div>
	</div>
</div>
<div class="page-container" id="txt" style="margin:10px 10%;width:50%;position:relative;top:50px;left:0;">
	<div class="row cl" style="margin-bottom:20px;">
		<label class="form-label col-xs-4 col-sm-3">
			视频：
		</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="hidden" id="vcode">
			<input type="hidden" id="link">
			<video src="" type="video/mp4" controls autoplay="autoplay"></video>
		</div>
	</div>
	<div class="row cl" style="margin-bottom:20px;">
		<label class="form-label col-xs-4 col-sm-3">
			视频标题：
		</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text" placeholder="标题" id="title">
		</div>
	</div>
	<div class="row cl" style="margin-bottom:20px;">
		<label class="form-label col-xs-4 col-sm-3">
			封面上传：
		</label>
		<div class="formControls col-xs-8 col-sm-9">
			<div class="uploader-thum-container">
				<div style="height:5px;"></div>
				<div class="webuploader-pick" style="width:80px;cursor:pointer;position:relative;">重选图片</div>
				<input type="file" id="uploadFile" style="width:105px;height:30px;background:#0088CC;opacity:0;cursor:pointer;position:relative;top:-10px;left:-110px;" onchange="uploadImage()"/>
				<input type="hidden" id="img">
				<img src="" id="viewimg">
			</div>
		</div>
	</div>
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
			<button onClick="save()" class="btn btn-secondary radius" type="button">立即上传</button>
			<button onClick="back()" class="btn btn-default radius" type="button"> &nbsp; 取消 &nbsp; </button>
		</div>
	</div>
</div>

<span id="pop"></span>
</body>
</html>


<script type="text/javascript">
	var vcode = getParamByUrl('vcode');
	var link = getParamByUrl('link');
	(function(){
		if (vcode=='')  {
			$('#upload').show();
			$('#txt').hide();
		} else {
			$('#link')[0].value = link;
			$('video').attr('src','/'+link);
			$('#upload').hide();
			$('#txt').show();
		}
	})();
	//获取图片
	function uploadImage() {
		var img = $("#viewimg"), dataURL, fileObj = $('#uploadFile')[0],
				windowURL = window.URL || window.webkitURL, reader = new FileReader();
		dataURL = windowURL.createObjectURL(fileObj.files[0]); //要显示图片的路径
		img.attr("src", dataURL); //显示图片
		reader.readAsDataURL(fileObj.files[0]); //这一步是关键
		reader.onload = function (e){
			var base64 = e.target.result; //这一步是关键
			$('#img')[0].value = base64;
		}
	}
	//保存
	function save(){
		var title = $('#title').val();
		var img = $('#img').val();
		var link = $('#link').val();
		var vcode = $('#vcode').val();
		var formData = {
			title: title, img: img, link: link, vcode: vcode,
		};
		$.ajax({
			type: 'post',
			url: domain+'video/add',
			data: formData,
			success: function (res) {
				res = JSON.parse(res);
				console.log(res);
				if (res.code!=0) {
					pop({msg:res.msg}); return;
				}
				pop({msg:'成功'});
				setTimeout(function(){
					window.location.href = 'video.html';
				},1000);
			},
			error: function () {
				console.log('网络错误');
			}
		});
	}
	function back(){
		window.location.href = 'video.html';
	}
</script>